<template>
	<view class="ai">
		<view class="chat-container">
			<scroll-view scroll-y class="chat-list" :scroll-top="scrollTop" @scrolltoupper="loadMoreHistory">
				<view class="chat-item" v-for="(item, index) in chatList" :key="index"
					:class="{ 'user': item.type === 'user' }">
					<view class="avatar">
						<image :src="item.type === 'user' ? '/static/ai/user.png' : '/static/ai/bot.png'"
							mode="aspectFill">
						</image>
					</view>
					<view class="content" :style="{ width: Array.isArray(item.content) ? '100%' : 'auto' }">
						<view v-if="Array.isArray(item.content)" class="product-grid">
							<ProductCard v-for="(product, index) in item.content" :key="index" :product="product" />
						</view>
						<text v-else>{{ item.content }}</text>
					</view>
				</view>
				<view v-if="loading" class="loading">Thinking...</view>
			</scroll-view>
		</view>

		<view class="input-area">
			<input type="text" v-model="inputText" placeholder="Please enter text" @confirm="sendMessage" />
			<image src="/static/ai/send.png" mode="aspectFill" class="send-btn" @tap="sendMessage"></image>
		</view>
	</view>
</template>

<script>
import ProductCard from '@/components/ProductCard.vue'
import request from '@/config/request'

export default {
	components: {
		ProductCard
	},
	data() {
		return {
			chatList: [
				{
					type: 'ai',
					content: '你好！我是你的健身器材AI助手，有什么可以帮你的吗？'
				}
			],
			inputText: '',
			scrollTop: 0,
			loading: false
		}
	},
	methods: {
		sendMessage() {
			if (!this.inputText.trim()) return
			this.scrollToBottom()
			this.chatList.push({
				type: 'user',
				content: this.inputText
			})
			this.loading = true
			this.getAIResponse(this.inputText).then(response => {
				this.chatList.push({
					type: 'ai',
					content: response
				})
				this.$nextTick(() => {
					this.scrollToBottom()
				})
			}).finally(() => {
				this.loading = false
			})

			this.inputText = ''
		},
		async getAIResponse(question) {
			try {
				const data = await request({
					url: '/vanna/query-products',
					method: 'POST',
					data: {
						question: question
					}
				})
				return data
			} catch (err) {
				console.error('API请求失败：', err)
				return '抱歉，服务出现了一些问题，请稍后再试。'
			}
		},
		scrollToBottom() {
			setTimeout(() => {
				const query = uni.createSelectorQuery().in(this)
				query.selectAll('.chat-item').boundingClientRect(data => {
					if (data && data.length > 0) {
						const lastItem = data[data.length - 1]
						this.scrollTop = lastItem.top + lastItem.height
					}
				}).exec()
			}, 100)
		},
		loadMoreHistory() {
			// 这里可以加载更多历史消息
		}
	}
}
</script>

<style lang="scss">
.ai {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 100rpx);
	background: linear-gradient(180deg, #fff8e1 0%, #FFFFFF 100%);
	box-sizing: border-box;

	/* #ifdef MP-WEIXIN */
	height: 100vh;
	padding-top: calc(var(--status-bar-height) + 110rpx);
	/* #endif */

	.chat-container {
		flex: 1;
		overflow: hidden;
		padding: 32rpx 0;

		.chat-list {
			width: 100%;
			height: 100%;
			padding: 0 20rpx;
			box-sizing: border-box;

			.chat-item {
				display: flex;
				margin-bottom: 30rpx;

				&.user {
					flex-direction: row-reverse;

					.content {
						background-color: #ffe60f;
						// color: #fff;
						margin-right: 20rpx;
						margin-left: 0;
					}
				}

				.avatar {
					width: 60rpx;
					height: 60rpx;
					border-radius: 16rpx;
					background-color: #ffffff;
					display: flex;
					justify-content: center;
					align-items: center;
					overflow: hidden;
					box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);

					image {
						width: 48rpx;
						height: 48rpx;
					}
				}

				.content {
					max-width: 100%;
					background-color: #f2f2f4;
					padding: 20rpx;
					border-radius: 10rpx;
					margin-left: 20rpx;
					font-size: 28rpx;
					line-height: 1.5;

					.product-grid {
						column-count: 2;
						column-gap: 20rpx;
					}
				}
			}
		}
	}

	.input-area {
		display: flex;
		padding: 10rpx 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin: 0 20rpx 20rpx 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);

		input {
			flex: 1;
			height: 60rpx;
			background-color: #ffffff;
			border-radius: 40rpx;
			padding: 0 20rpx 0 0;
			font-size: 28rpx;
		}

		.send-btn {
			width: 48rpx;
			height: 48rpx;
			margin-top: 8rpx;
		}
	}

	.loading {
		text-align: center;
		padding: 20rpx;
		color: #999;
		font-size: 24rpx;
	}
}
</style>